vue-class-component

Class-based Component Definition

This feature allows you to define Vue components using ES6 class syntax. The @Component decorator is used to mark a class as a Vue component.

import { Vue, Component } from 'vue-class-component';

@Component
class MyComponent extends Vue {
  message: string = 'Hello, world!';

  greet() {
    console.log(this.message);
  }
}

Lifecycle Hooks

You can define lifecycle hooks as methods within the class. This example shows how to use the created lifecycle hook.

import { Vue, Component } from 'vue-class-component';

@Component
class MyComponent extends Vue {
  created() {
    console.log('Component created');
  }
}

Computed Properties

Computed properties can be defined as getter methods within the class. This example demonstrates a computed property that concatenates first and last names.

import { Vue, Component } from 'vue-class-component';

@Component
class MyComponent extends Vue {
  firstName: string = 'John';
  lastName: string = 'Doe';

  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

Watchers

Watchers can be defined using the @Watch decorator. This example shows how to watch for changes to the 'message' property.

import { Vue, Component, Watch } from 'vue-class-component';

@Component
class MyComponent extends Vue {
  message: string = 'Hello';

  @Watch('message')
  onMessageChanged(newValue: string, oldValue: string) {
    console.log(`Message changed from ${oldValue} to ${newValue}`);
  }
}